<template>
	<view class="page">
		<div class="headers">
			<!-- <u-swiper :list="loginLunBo" indicator="true" indicatorMode="dot"></u-swiper> -->
			<u-swiper :list="loginLunBo" keyName="image" :current="current" :indicator="true" indicatorMode="dot"
				height="100%" radius="10rpx" style="width: 100%;"></u-swiper>
		</div>
		<view class="items">
			<view class="itemsTip">
				<view>{{$t('login.EmailNumber')}}</view>
			</view>
			<view class="sd">
				<u--input :placeholder="$t('login.EmailNumberTips')" border="surround" v-model="FormData.account"
					:customStyle="{width:'650rpx',height:'49rpx'}"></u--input>
			</view>
		</view>
		<view class="items">
			<view class="itemsTip">
				{{$t('login.Password')}}
			</view>
			<view class="sd">
				<u--input :placeholder="$t('login.Passwordtips')" border="surround" v-model="FormData.password_hash"
					:customStyle="{width:'650rpx',height:'49rpx'}" password></u--input>
				<image src="../../../static/53.png" mode=""
					style="width: 54rpx;height: 54rpx;position: absolute;right: 18rpx;"></image>

			</view>
		</view>

		<view class="items">
			<view class="itemsTip">
				<view>{{$t('login.Rememberme')}}</view>
			</view>
			<view class="sd">
				<!-- 	<u-button type="primary" text="Yes"
					:customStyle="{width:'80rpx',height:'80rpx',backgroundColor:'#F5F5F5',color:'#666',margin:'0px',border:'none',fontWeight:'700'}"></u-button>
				<u-button type="primary" text="No"
					:customStyle="{width:'80rpx',height:'80rpx',backgroundColor:'#F5F5F5',color:'#666',margin:'0px 0 0 20rpx',border:'none',fontWeight:'700'}"></u-button> -->

				<view class="actib" v-for="(items,index) in acdata" :key="index"
					:class="[index == indexIems ? 'selectZhong' : '']" @click="indexIems = index">
					{{$t(`${items.title}`)}}
				</view>
			</view>
		</view>

		<u-button type="primary" :text="$t('login.log')"
			:customStyle="{width:'672rpx',height:'80rpx',backgroundColor:'#445F79',color:'#fff',margin:'30px auto 0rpx',border:'none',fontSize:'16rpx'}"
			@click="homeLogin"></u-button>


		<u-button type="primary" :text="$t('login.shiFouZhangHu')"
			:customStyle="{width:'672rpx',height:'80rpx',backgroundColor:'#D9D9D9',color:'#333',margin:'60px auto 0rpx',fontWeight:'700',border:'none',borderRadius: '16rpx',fontSize:'16rpx'}"
			@click="signUp"></u-button>
		<u-button type="primary" :text="$t('login.wangJiYongHu')"
			:customStyle="{width:'672rpx',height:'80rpx',backgroundColor:'#D9D9D9',color:'#333',margin:'20px auto 0rpx', fontWeight:'700',border:'none',borderRadius: '16rpx',fontSize:'16rpx'}"
			@click="setPassWord"></u-button>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				newUrl: 1, //0为新接口1为老接口
				FormData: {
					account:uni.getStorageSync('account'),
					password_hash:uni.getStorageSync('password_hash')
				},
				applicationLocale: '',
				loginLunBo: [],
				acdata: [{
					id: 0,
					title: 'login.Yesss'
				}, {
					id: 1,
					title: 'login.Nosss'
				}],
				indexIems: 0,
			}
		},
		onShow() {
			this.getLunBao()
		},
		methods: {
			// 获取首页轮播
			getLunBao() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get('/biz/app/carouselImageList', {
					type: 1
				}, 0).then(res => {
					this.loginLunBo = res.data.data.map(items => {
						return {
							image: items.image,
						}
					})
				})
			},
			getUserInfo() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get(`/backend/user/userinfo`, {}, this.newUrl).then(res => {
					// this.userInfo = res.data.data
					uni.setStorageSync('user', JSON.stringify(res.data.data))
					console.log(res, '登录后');
					uni.switchTab({
						url: '/pages/home/index'
					})
				})
			},
			// 签约
			signUp() {
				uni.navigateTo({
					url: '/pages/zanZhuShang/zanZhuShangYanZheng'
				})
			},
			// 重置密码
			setPassWord() {
				uni.navigateTo({
					url: '/pages/resetPassword/resetPassword'
				})
			},
			// 登录
			homeLogin() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				if (!this.FormData.account) {
					this.$ToastFail(this.$t('login.tps1'))
					return
				}
				if (!this.FormData.password_hash) {
					this.$ToastFail(this.$t('login.tps2'))
					return
				}
				this.$post(`/backend/login/login`, this.FormData, this.newUrl).then(res => {
					if (res.status) {
						this.$ToastOk(this.$t('loginSucceeded'))
						setTimeout(() => {
							uni.setStorageSync('userInfo', JSON.stringify(res.data.data))
							if (this.indexIems == 0) {
								uni.setStorageSync('token', res.data.data.token)
								uni.setStorageSync('account', this.FormData.account)
								uni.setStorageSync('password_hash', this.FormData.password_hash)
								this.getUserInfo()
								
							} else {
								// uni.setStorageSync('token', '')
								uni.setStorageSync('token', res.data.data.token)
								uni.setStorageSync('account', '')
								uni.setStorageSync('password_hash', '')
								this.getUserInfo()
							}
						},1000)

					} else {
						this.$ToastFail(`${res.message}`)
					}
				})

			}
		}
	}
</script>

<style>
	.page {
		overflow: hidden;
		width: 100%;
		height: 100vh;
		/* background-color: cornflowerblue; */
	}

	.headers {
		width: 700rpx;
		height: 350rpx;
		background-color: #fff;
		margin: 10rpx auto 0;
		padding: 15rpx;
		box-sizing: border-box;
	}

	.items {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: 160rpx;
		/* background-color: cadetblue; */
		margin: 30rpx auto 0;
		padding: 0 42rpx;
		box-sizing: border-box;
	}

	.itemsTip {
		height: 54rpx;
		/* font-family: Roboto; */
		font-family: 'PingFang SC';
		font-size: 18px;
		font-weight: 500; 
		line-height: 40rpx;
		letter-spacing: 0em;
		text-align: left;
		color: #333;
	}

	.sd {
		position: relative;
		display: flex;
		/* justify-content: flex-start; */
		align-items: center;
		width: 100%;
		height: 80rpx;
		/* background-color: red; */
	}

	.actib {
		/* font-family: Roboto; */
		font-family: 'PingFang SC';
		font-size: 30rpx;
		font-weight: 400;
		line-height: 70rpx;
		letter-spacing: 0em;
		text-align: center;
		width: 80rpx;
		height: 80rpx;
		background-color: #F5F5F5;
		margin-right: 20rpx;
	}

	.selectZhong {
		background-color: #445F79;
		color: #fff;
		border-radius: 10rpx;
	}
</style>